<template>
  <div class="form-view-row form-provider-view">
    <label>{{ field.displayName }}</label>
    <div class="form-view-row-content">
      <!-- start 子表单表格 -->
      <el-table
        v-if="columns.length"
        :data="subformFieldsValues"
        header-row-class-name="common-list-table-header__v2"
        border
      >
        <el-table-column
          v-for="(column, index) in columns"
          :key="`${column.field}_${index}`"
          :label="column.displayName"
          :min-width="column.minWidth || '108px'"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <template v-if="column.formType === 'attachment'">
              <el-button
                v-if="scope.row[column.fieldName] && scope.row[column.fieldName].length"
                type="text"
                size="small"
                @click="searchAttachment(scope.row[column.fieldName])">
                查看
              </el-button>
            </template>
            <template v-else>
              {{
                $formatFormField(column, scope.row)
              }}
            </template>
          </template>
        </el-table-column>
      </el-table>
      <!-- end 子表单表格 -->
    </div>

    <!-- 附件查看 S -->
    <base-modal
      :show.sync="visibleAttc"
      title="查看"
      width="600px"
      append-to-body
    >
      <div class="form-view-sub-case base-file__preview pad-20">
        <base-file-item v-for="(a, index) in attachments" :Source="attachments" :key="index" :file="a" readonly/>
      </div>
    </base-modal>
    <!-- 附件查看 E -->
  </div>
</template>

<script>
/* service */
export default {
  name: 'form-suc-case-view',
  props: {
    field: {
      type: Object,
      default: () => ({}),
    },
    value: {
      type: Array,
      default: () => [],
    },
  },
  data() {
     return {
       visibleAttc: false,
       attachments: [], // 附件
     }
  },
  computed: {
    columns() {
      return this.field?.subFormFieldList?.sort((a, b) => a.orderId - b.orderId) || [];
    },
    subformFieldsValues() {
      return this.value;
    },
  },
  methods: {
    // 点击查看附件
    searchAttachment(value) {
      this.attachments = value;
      this.visibleAttc = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.form-provider-view {
  align-items: flex-start;
}
</style>
<style lang="scss">
.form-view-sub-case .base-file-item {
  margin-bottom: 10px;
}
</style>

